<template>
  <div>
    <div class="top">
      <span @click="returntap">取消</span>
      <van-button type="primary" size="small">发送</van-button>
    </div>
    <div class="title">申请添加朋友</div>
    <div class="message">发送添加朋友申请</div>
    <textarea
      class="texterat"
      cols="30"
      rows="10"
      placeholder="我是我的世界"
    ></textarea>
    <div class="message">设置备注</div>
    <textarea
      class="texterat1"
      cols="30"
      rows="10"
      placeholder="测试"
    ></textarea>
    <div class="message">生活圈和动态视频</div>
    <div class="choose">
      <span>不让他看</span>
      <van-switch v-model="checked" />
    </div>
    <div class="choose1">
      <span>不看他</span>
      <van-switch v-model="checked1" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checked: false,
      checked1: false,
    };
  },
  methods:{
      returntap(){
            this.$router.go(-1);
      }
  }
};
</script>
<style scoped>
.top {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  width: 94%;
  margin-left: 3%;
}
.title {
  margin-top: 50px;
  text-align: center;
  font-weight: bold;
  font-size: 25px;
}
.message {
  margin: 20px 0 10px 5%;
  color: #888888;
}
.texterat {
  width: 80%;
  margin: 0 5%;
  padding: 20px 5%;
  height: 60px;
  border: none;
  background: #f8f8f8;
}
.texterat1 {
  width: 80%;
  margin: 0 5%;
  padding: 20px 5%;
  height: 30px;
  border: none;
  background: #f8f8f8;
}
.choose {
  margin-top: 50px;
  width: 80%;
  margin-left: 10%;
  display: flex;
  justify-content: space-between;
  font-size: 18px;
}
.choose1{
    margin-top: 20px;
  width: 80%;
  margin-left: 10%;
  display: flex;
  justify-content: space-between;
  font-size: 18px;  
}
</style>